<template>
    <div>
        <div style="position:fixed;z-index:100;width:100%">
            <div style="position:fixed;width:100%;padding: 2px;" class="van-cell--borderless van-contact-card">
                <van-dropdown-menu title="实训选择">
                    <van-dropdown-item v-model="classId" :options="classInfos" @change="changeClass" />
                </van-dropdown-menu>
            </div>
        </div>
        <div>
            <div>
                <div style="height: 73px"></div>
                <van-field v-model="content" rows="5" autosize label="答疑评论：" type="textarea" maxlength="350"
                    placeholder="请输入评论" show-word-limit />
                <van-button @click="addDiscuss" plain type="info">添加评论</van-button>
            </div>
            <div>
                <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
                    评论内容
                </van-divider>
            </div>
            <div style="height: 50%;overflow: hidden;">
                <div class="out" v-for="(item,index) in discusses">
                    <div class="avatar">
                        <van-image round width="100%" height="100%" 
                            :src="`/api/getImage?url=${item.userAvatar}`" />
                    </div>
                    <div class="cont">
                        <span>{{item.userNick}}:{{item.createTime}} 
                            <van-tag @click="deleteOut(item.id)" v-if="userId == item.relationStudentId" type="danger">删除</van-tag>
                        </span>
                        <p>{{item.content}}</p>
                        <p><van-tag @click="intoComm(item.id)" type="primary">回复</van-tag></p>
                        
                        <div class="out" v-for="(items,index) in item.comments">
                            <div class="avatar">
                                <van-image round width="100%" height="100%" 
                                :src="`/api/getImage?url=${items.userParentContent}`" />
                            </div>
                            <div class="cont">
                                <span>{{items.userParentNick}}:{{items.ccreateTime}}
                                    <van-tag @click="deleteIn(items.cid)" v-if="userId == items.replyPeopleId" type="danger">删除</van-tag>
                                </span>
                                <p>{{items.ccontent}}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="height: 200px"></div>
            </div>
        </div>
        <van-dialog v-model="showComm" title="评论回复" show-cancel-button :beforeClose="beforeClose">
            <van-cell-group>
                <van-field v-model="ccontent" label="内容" placeholder="请输入内容" />
            </van-cell-group>
        </van-dialog>
    </div>
</template>
<style>
.out{
    width: 100%;
    overflow: hidden;
    margin-left: 5%;
}
.avatar{
    width: 8%;
    float: left;
    margin-right: 5px;
}
.cont{
    width: 75%;
    float: left;
    text-align: left;
}
.cont>span{
    font-size: 8px;
}
.van-dropdown-menu__bar {
    height: 68px;
}
</style>
<script>
import req from '../../request/index'
import {GetImage} from '../../request/FileHttpRequestUtil'
export default {
    name: '',
    data() {
        return {
            classId: '',
            classInfos: [],
            className: '0',
            content: '',
            discusses:[],
            userId:this.$store.state.user.id,
            ccontent:'',
            showComm:false,
            id:''
        };
    },
    methods: {
        intoComm(id){
            this.showComm = true;
            this.ccontent = '';
            this.id = id;
        },
        beforeClose(res, next) {
            console.log(res);
            if (res == "confirm") {
                req({
                    url: "updateComment",
                    method: "post",
                    data: {
                        relationDiscussId: this.id,
                        content: this.ccontent,
                        replyPeopleId:this.userId,
                        userParentNick:this.$store.state.user.userNick,
                        userParentContent:this.$store.state.user.userAvatar
                    }
                }).then(res => {
                    this.getDiscuss();
                }).catch(err => {
                    console.log(err);
                })
            }
            next()
        },
        addDiscuss(){
            req({
                url: "addDiscuss",
                method: "post",
                data: {
                    relationClassId: this.classId,
                    relationStudentId: this.userId,
                    content: this.content
                }
            }).then(res => {
                this.getDiscuss();
            }).catch(err => {
                console.log(err);
            })
        },
        deleteIn(id){
            req({
                url: "deleteIn",
                method: "post",
                data: {
                    id: id
                }
            }).then(res => {
                this.getDiscuss();
            }).catch(err => {
                console.log(err);
            })
        },
        deleteOut(id){
            req({
                url: "deleteOutDiscuss",
                method: "post",
                data: {
                    id: id
                }
            }).then(res => {
                this.getDiscuss();
            }).catch(err => {
                console.log(err);
            })
        },
        async getImgM(url){
            var tempUrl = await GetImage('/api/getImage?url='+url).then(url=>{
                return url;
            })
            return tempUrl;
        },
        async initDiscusses(data){
            for(var i=0;i<data.length;i++){
                if(data[i].userAvatar != null){
                    await this.getImgM(data[i].userAvatar).then(url=>{
                        data[i].userAvatar = url; 
                    });
                }
                if(data[i].comments.length > 0){
                    for(var j=0;j<data[i].comments.length;j++){
                        if(data[i].comments[j].userParentContent != null){
                            await this.getImgM(data[i].comments[j].userParentContent).then(url=>{
                                data[i].comments[j].userParentContent = url; 
                            });
                        }
                    }
                }
            }
            this.discusses = data;
            return data;
        },
        getDiscuss(){
            req({
                url: "getDiscuss",
                method: "post",
                data: {
                    id: this.classId
                }
            }).then(res => {
                //this.initDiscusses(res.data.data);
                this.discusses = res.data.data;

            }).catch(err => {
                console.log(err);
            })
        },
        getShixun() {
            req({
                url: "getShixun",
                method: "post",
                data: {
                    id: this.$store.state.user.id
                }
            }).then(res => {
                if (res.data.code == 0) {
                    var data = res.data.data;
                    this.classId = res.data.data[0].id;
                    this.practiceTitle = res.data.data[0].practiceTitle;
                    for (var i = 0; i < data.length; i++) {
                        var x = { text: '班级1', value: 0 };
                        x.text = data[i].practiceTitle;
                        x.value = data[i].id;
                        this.classInfos.push(x);
                    }
                    this.getDiscuss();
                }
            }).catch(err => {
                console.log(err);
            })
        },
        changeClass(res) {
            console.log(res)
            //根据班级id获取当前的所有任务信息
            for (var i = 0; i < this.classInfos.length; i++) {
                if (this.classInfos[i].value == res) {
                    this.practiceTitle = this.classInfos[i].text;
                    this.getDiscuss();
                }
            }
        },
    },
    computed: {
    },
    mounted() {
        this.getShixun()
    },
}
</script>